 <template>
  <header class="simple-header van-hairline--bottom">
    <template v-if="$slots.leftIcon">
      <slot name="leftIcon"> </slot>
    </template>
    <template v-else>
      <!-- <i v-if="$props.noback" class="nbicon nbfanhui" @click="goBack"></i>  -->
      <i v-if="!isback" class="nbicon nbfanhui" @click="goBack"></i>
      <i v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
    </template>
    
    <slot name="default">
      <div class="simple-header-name">{{ name }}</div>
    </slot>

    <template  v-if="$slots.rightIcon">
      <slot name="rightIcon"> </slot>
    </template>
    <template v-else >
      <van-popover
        actions-direction="vertical"
        theme="light"
        placement="bottom-end"
        :show="popoverObj.flag" 
        :actions="$props.actions" 
        @select="onSelect">
        <template v-if="$slots.popover_default" #default>
          <slot name="popover_default" :action="$props.actions"></slot>
        </template>
        <template v-if="$slots.action" #action="slotProps">
          <slot name="action" v-bind="slotProps"></slot>
        </template>
        <template #reference>
          <i  v-if="!ismore" class="nbicon nbmore" @click="moreBtn"></i>
        </template>
      </van-popover>
    </template>

  </header>
  <div class="block" ></div>
</template>

<!-- 
  van-popover组件插槽
  action({ action: PopoverAction, index: number }) actionItem插槽
  reference	触发 Popover 显示的元素内容
  default	自定义菜单内容
 -->

<!-- <script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    back: {
      type: String,
      default: ''
    },
    noback: {
      type: Boolean,
      default: false
    }
  },
  emits: ['callback'],
  setup(props, ctx) {
    const isback = ref(props.noback)
    const router = useRouter()
    const goBack = () => {
      if (!props.back) {
        router.go(-1)
      } else {
        router.push({ path: props.back })
      }
      ctx.emit('callback')
    }
    return {
      goBack,
      isback
    }
  }
}
</script> -->

<script setup >
  import {ref, reactive, useSlots, useAttrs, watch  } from 'vue'
  import { useRouter } from 'vue-router'

  // defineSlots只使用于ts中
  // const $slot = defineSlots(['popoverItem','popoverContent'])
  const $slots = useSlots()
  const $attrs = useAttrs()
  const router = useRouter();
  console.log('simpleHeader_slots_attrs...',$slots, $attrs)
  console.log($attrs.ccAttrs)
  
  const $props = defineProps({
    name: {
      type: String,
      default: ''
    },
    back: { // 自定返回路径
      type: String,
      default: ''
    },
    noback: { // 不展示返回按钮
      type: Boolean,
      default: false
    },
    nomore: { // 不展默认更多按钮
      type: Boolean,
      default: false
    },
    actions: { // popover中的actons
      type: Array,
      default: ()=>{
        return [
        { id:'111',text: '选项一',icon:'like-o',color:'red',disabled:false,className:'item1' },
        { id:'222',text: '选项二',icon:'star-o',color:'green',disabled:true, className:'item2' },
        { id:'333',text: '选项三',icon:'phone-o',color:'gray',disabled:false, className:'item3'},
        ];
      }
    }
  })
  const $emit = defineEmits(['callback','moreClick']);
  // 导致你想要更改一个 prop 的需求通常来源于以下两种场景：
  // 1.需要对传入的 prop 值做进一步的转换。在这种情况中，最好是基于该 prop 值定义一个计算属性：
  // 该 prop 变更时计算属性也会自动更新
  // const normalizedSize = computed(() => props.size.trim().toLowerCase())
  // 2.prop 被用于传入初始值；而子组件想在之后将其作为一个局部数据属性
  // 像下面这样做就使 prop 和后续更新无关了
  const isback =ref($props.noback);
  const ismore =ref($props.nomore);
  const popoverObj = reactive({
    flag:false,
  })

  watch(()=>$props.noback,(newVal,oldVal)=>{
    console.log('watch...',newVal,oldVal)
  },{ 
    immediate:true, // 在侦听器创建时立即触发回调。第一次调用时旧值是 undefined
    deep:true, // 如果源是对象，强制深度遍历，以便在深层级变更时触发回调
    flush:'sync', // sync它会在 Vue 进行任何更新之前触发,post中能访问被 Vue 更新之后的所属组件的 DOM
    once:true, // 回调函数只会运行一次。侦听器将在回调函数首次运行后自动停止
    onTrack(e) { // 调试侦听器的依赖
      // debugger
    },
    onTrigger(e) {
      // debugger
    }
  })
  
  const goBack = () => {
    if (!$props.back) {
      router.go(-1)
    } else {
      router.push({ path: $props.back })
    }
    $emit('callback')
  }
  const moreBtn = ()=>{
    console.log('moreBtn..');
    // popoverObj.flag = true;
    // 单项数据传递
    // $props.actions = $props.actions.concat({
    //   text:'哈哈哈'
    // });
    $emit('moreClick')
  }
  const onSelect = (action,index)=>{
    console.log('moreItemSelect...',action, index)
  }
   
</script>

<style lang="less" scoped>
  @import '../common/style/mixin';
  .simple-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    .fj();
    .wh(100%, 44px);
    line-height: 44px;
    padding: 0 10px;
    .boxSizing();
    color: #252525;
    background: #fff;
    .simple-header-name {
      font-size: 14px;
    }
  }
  .block {
    height: 44px;
  }
</style>
